<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<c:set var="context"
	value="${pageContext.request.servletContext.contextPath}" />
<script type="text/javascript">
	$(document)
			.ready(
					function() {
						var table = $('#listCourses')
								.DataTable(
										{
											"bServerSide" : false,
											"sAjaxSource" : "listJSON",
											"aaSorting": [[ 4, "desc" ]],
											"aoColumns" : [
													{
														"mData" : null,
														"mRender" : function(
																data, type, row) {
															return '<div align="center"><input type="checkbox" class="select_checkbox" ></div>';
														},
														"width" : "1%",
														"bSortable" : false
													},
													{
														"mData" : "submittedTestAndQuizzId",
														"sTitle" : "Test Id",
														"width" : "20%",
														"visible" : false,
													},
													{
														"mData" : "testAndQuizzName",
														"mRender" : function(
																data, type, row) {
															return '<a href="../feedback/' + row.submittedTestAndQuizzId + '">'
																	+ data
																	+ '</a>';
														},
														"width" : "20%"
													},
													{
														"mData" : "startTime",
														"width" : "20%"
													},
													{
														"mData" : "submittedTime",
														"width" : "20%"
													}, {
														"mData" : "point",
														"width" : "20%"
													} ]
										});

						$('table tbody').on(
								'click',
								'tr',
								function() {
									$(this).toggleClass('selected');
									var checked = $(this).children().children(
											".select_checkbox");
									try {
										checked.prop("checked", !checked
												.prop("checked"));
									} catch (e) {
										alert(e);
									}
								});

						$('#delete').click(
								function() {
									try {
										var names = table.cells('.selected', 1)
												.data();
										var listName = "";
										for (var i = 0; i < names.length; i++) {
											names[i] = names[i] + ";"
											listName = listName + names[i];
										}
										alert(listName);
										$.ajax({
											url : 'delete',
											type : "POST",
											contentType : 'application/json',
											mimeType : 'application/json',
											data : listName,
											error : function(data, status, er) {
												alert("error: " + data
														+ " status: " + status
														+ " er:" + er);
											},
											dataType : 'text',
											success : function(data) {
												alert(data);
											},
										});
									} catch (ex) {
										alert(ex);
									}
								});
					});
</script>
<!-- Template for all sub-pages -->
<div id="portal_main_content" align="left">
	<!-- Don't change this -->
	<div id="site_title">

		<!-- ************** -->
		<!-- Able to change -->
		<h2>Test Detail</h2>
	</div>
	<!-- Don't change this -->
	<div id="site_content">
		<div id="btn_control">

			<!-- ************** -->
			<!-- Able to change -->
			<c:if test="${flagTest == true}">
				<form action="test">
					<input type="submit" value="Begin Test" class="btn btn-primary btn-sm">
				</form>
			</c:if>

		</div>
		<div id="table">

			<!-- ************** -->
			<!-- Able to change -->
			<h6 id="testName" class="hidden">${test.testAndQuizzID}</h6>
			<h2>${test.testAndQuizzName}:Test Submitted</h2>
			<table id="listCourses"
				class="hover table table-striped table-bordered" cellspacing="0"
				style="width: 100%;">
				<thead>
					<tr>
						<th></th>
						<th>ID</th>
						<th>Test name</th>
						<th>Test time</th>
						<th>Submit Time</th>
						<th>Point</th>
					</tr>
				</thead>
			</table>
		</div>

	</div>
</div>